/*

@description: 网点查询JavaScript

@author: 赖赖

@update: 2021年9月10日09:19:17

*/

// 分页的类
class SimplePagination {
    constructor(totalPageCount) {
        if (!totalPageCount) return
        this.state = {
            pageNumber: 1,
            totalPageCount
        }
    }

    init(paramsObj) {
        let state = this.state
        // 页面元素的外部容器
        state.container = paramsObj.container || 'body'
        // 不包括开头和结尾的两个固定按钮外，中间最多展示几个数字页码按钮
        state.maxShowBtnCount = paramsObj.maxShowBtnCount || 5
        // 所有的页码元素，包括上一页、下一页
        state.pCName = paramsObj.pCName || 'page-li',
            // 当选中页码时添加的类名class
            state.activeCName = paramsObj.activeCName || 'page-active',
            // 代表页码数字的属性
            state.dataNumberAttr = paramsObj.dataNumberAttr || 'data-number',
            // 上一页 按钮的类名class
            state.prevCName = paramsObj.prevCName || 'page-prev',
            // 下一页 按钮的类名class
            state.nextCName = paramsObj.nextCName || 'page-next',
            // 禁用 上一页 按钮时给此按钮添加的类名class
            state.disbalePrevCName = paramsObj.disbalePrevCName || 'no-prev',
            // 禁用 下一页 按钮时给此按钮添加的类名class
            state.disbaleNextCName = paramsObj.disbaleNextCName || 'no-next',
            // 不包括 上一页 下一页 省略号 按钮的页码元素类名
            state.pageNumberCName = paramsObj.pageNumberCName || 'page-number'
        // 触发切换页面的事件
        state.swEvent = paramsObj.swEvent || 'click'
        // 切换页面时调用的函数
        state.onPageChange = paramsObj.onPageChange
        // 当需要省略符号占位时，确定 active的位置
        state.totalPageCount > state.maxShowBtnCount + 2 && (state.activePosition = Math.ceil(state.maxShowBtnCount / 2))
        this.renderPageDOM()
    }

    switchPage() {
        let state = this.state
        let pCNameList = this.selectorEle('.' + state.pCName, true)
        let pageNumber
        pCNameList.forEach(item => {
            item.addEventListener(state.swEvent, e => {
                const currentPageEle = e.target
                if (this.hasClass(currentPageEle, state.activeCName)) return
                let dataNumberAttr = currentPageEle.getAttribute(state.dataNumberAttr)
                if (dataNumberAttr) {
                    // 点击 数字 按钮
                    pageNumber = +dataNumberAttr
                } else if (this.hasClass(currentPageEle, state.prevCName)) {
                    // 点击 上一页 按钮
                    state.pageNumber > 1 && (pageNumber = state.pageNumber - 1)
                } else if (this.hasClass(currentPageEle, state.nextCName)) {
                    // 点击 下一页 按钮
                    state.pageNumber < state.totalPageCount && (pageNumber = state.pageNumber + 1)
                }
                pageNumber && this.gotoPage(pageNumber)
            })
        })
    }
    gotoPage(pageNumber) {
        let state = this.state
        let evaNumberLi = this.selectorEle('.' + state.pageNumberCName, true)
        let len = evaNumberLi.length
        if (!len || this.isIllegal(pageNumber)) return
        // 清除 active 样式
        this.removeClass(this.selectorEle(`.${state.pCName}.${state.activeCName}`), state.activeCName)
        if (state.activePosition) {
            let rEllipseSign = state.totalPageCount - (state.maxShowBtnCount - state.activePosition) - 1
            // 左边不需要出现省略符号占位
            if (pageNumber <= state.maxShowBtnCount && (pageNumber < rEllipseSign)) {
                if (+evaNumberLi[1].getAttribute(state.dataNumberAttr) > 2) {
                    for (let i = 1; i < state.maxShowBtnCount + 1; i++) {
                        evaNumberLi[i].innerText = i + 1
                        evaNumberLi[i].setAttribute(state.dataNumberAttr, i + 1)
                    }
                }
                this.hiddenEllipse('.ellipsis-head')
                this.hiddenEllipse('.ellipsis-tail', false)
                this.addClass(evaNumberLi[pageNumber - 1], state.activeCName)
            }
            // 两边都需要出现省略符号占位
            if (pageNumber > state.maxShowBtnCount && pageNumber < rEllipseSign) {
                // 针对 maxShowBtnCount===1 的特殊处理
                this.hiddenEllipse('.ellipsis-head', pageNumber === 2 && state.maxShowBtnCount === 1)
                this.hiddenEllipse('.ellipsis-tail', false)
                for (let i = 1; i < state.maxShowBtnCount + 1; i++) {
                    evaNumberLi[i].innerText = pageNumber + (i - state.activePosition)
                    evaNumberLi[i].setAttribute(state.dataNumberAttr, pageNumber + (i - state.activePosition))
                }
                this.addClass(evaNumberLi[state.activePosition], state.activeCName)
            }
            // 右边不需要出现省略符号占位
            if (pageNumber >= rEllipseSign) {
                this.hiddenEllipse('.ellipsis-tail')
                this.hiddenEllipse('.ellipsis-head', false)
                if (+evaNumberLi[len - 2].getAttribute(state.dataNumberAttr) < state.totalPageCount - 1) {
                    for (let i = 1; i < state.maxShowBtnCount + 1; i++) {
                        evaNumberLi[i].innerText = state.totalPageCount - (state.maxShowBtnCount - i) - 1
                        evaNumberLi[i].setAttribute(state.dataNumberAttr, state.totalPageCount - (state.maxShowBtnCount - i) - 1)
                    }
                }
                this.addClass(evaNumberLi[(state.maxShowBtnCount + 1) - (state.totalPageCount - pageNumber)], state.activeCName)
            }
        } else {
            // 不需要省略符号占位
            this.addClass(evaNumberLi[pageNumber - 1], state.activeCName)
        }
        state.pageNumber = pageNumber
        state.onPageChange && state.onPageChange(state)
        // 判断 上一页 下一页 是否可使用
        this.switchPrevNextAble()
    }

    switchPrevNextAble() {
        let state = this.state
        let prevBtn = this.selectorEle('.' + state.prevCName)
        let nextBtn = this.selectorEle('.' + state.nextCName)
        // 当前页已经是第一页，则禁止 上一页 按钮的可用性
        state.pageNumber > 1 ?
            (this.hasClass(prevBtn, state.disbalePrevCName) && this.removeClass(prevBtn, state.disbalePrevCName)) :
            (!this.hasClass(prevBtn, state.disbalePrevCName) && this.addClass(prevBtn, state.disbalePrevCName))
        // 当前页已经是最后一页，则禁止 下一页 按钮的可用性
        state.pageNumber >= state.totalPageCount ?
            (!this.hasClass(nextBtn, state.disbaleNextCName) && this.addClass(nextBtn, state.disbaleNextCName)) :
            (this.hasClass(nextBtn, state.disbaleNextCName) && this.removeClass(nextBtn, state.disbaleNextCName))
    }

    renderPageDOM() {
        // 渲染页码DOM
        let state = this.state
        let pageContainer = this.selectorEle(state.container)
        if (!pageContainer) return
        let {
            totalPageCount,
            pCName,
            prevCName,
            disbalePrevCName,
            pageNumberCName,
            activeCName,
            dataNumberAttr,
            maxShowBtnCount,
            nextCName,
            disbaleNextCName
        } = state
        let paginationStr = `
<ul class="pagination">
<li class="${pCName} ${prevCName} ${disbalePrevCName}">上一页</li>
<li class="${pCName} ${pageNumberCName} ${activeCName}" ${dataNumberAttr}='1'>1</li>
`
        if (totalPageCount - 2 > maxShowBtnCount) {
            paginationStr += `
<li class="${pCName} number-ellipsis ellipsis-head" style="display: none;">...</li>`
            for (let i = 2; i < maxShowBtnCount + 2; i++) {
                paginationStr += `<li class="${pCName} ${pageNumberCName} ${i === 1 ? activeCName : ''}" ${dataNumberAttr}='${i}'>${i}</li>`
            }
            paginationStr += `
<li class="${pCName} number-ellipsis ellipsis-tail">...</li>
<li class="${pCName} ${pageNumberCName}" ${dataNumberAttr}='${totalPageCount}'>${totalPageCount}</li>
`
        } else {
            for (let i = 2; i <= totalPageCount; i++) {
                paginationStr += `<li class="${pCName} ${pageNumberCName}" ${dataNumberAttr}='${i}'>${i}</li>`
            }
        }
        paginationStr += `<li class="${pCName} ${nextCName}${totalPageCount === 1 ? ' ' + disbaleNextCName : ''}">下一页</li></ul>`
        pageContainer.innerHTML = paginationStr
        // 切换页码
        this.switchPage()
    }

    isIllegal(pageNumber) {
        let state = this.state
        return (
            state.pageNumber === pageNumber || Math.ceil(pageNumber) !== pageNumber ||
            pageNumber > state.totalPageCount || pageNumber < 1 ||
            typeof pageNumber !== 'number' || pageNumber !== pageNumber
        )
    }

    hiddenEllipse(selector, shouldHidden = true) {
        this.selectorEle(selector).style.display = shouldHidden ? 'none' : ''
    }

    selectorEle(selector, all = false) {
        return all ? document.querySelectorAll(selector) : document.querySelector(selector)
    }

    hasClass(eleObj, className) {
        return eleObj.classList.contains(className);
    }

    addClass(eleObj, className) {
        eleObj.classList.add(className);
    }

    removeClass(eleObj, className) {
        if (this.hasClass(eleObj, className)) {
            eleObj.classList.remove(className);
        }
    }
}

// 查询框
const ss = document.querySelector(".ss")
// 省份
const sf = document.querySelector("#selProvince")
// 城市
const cs = document.querySelector("#selCity")

// 网点选择
getwangdian()
function getwangdian(page = 1) {
    $.ajax({
        url: `http://127.0.0.1:7001/api/network?page=${page}`,
        method: 'get',
        success: function (res) {
            // console.log(res);
            // 下拉框
            var aProvince = ["广西壮族自治区", "广东省", "浙江省", "云南省", "河北省", "山西省", '辽宁省', '吉林省', '黑龙江省', '江苏省', '安徽省', '福建省', '江西省', '山东省', '河南省', '湖北省', '湖南省', '海南省', '四川省', '甘肃省', '青海省', '台湾省', '内蒙古自治区', '西藏自治区', '宁夏回族自治区', '新疆维吾尔自治区', '北京市', '天津市', '上海市', '重庆市', '香港特别行政区', '澳门特别行政区'];
            var aCity = [
                ["南宁市", "柳州市", "桂林市", "梧州市", "北海市", "防城港市", "钦州市", "贵港市", "玉林市", "百色市", "贺州市", "河池市", "来宾市", "崇左市"],
                ['广州市', '深圳市', '珠海市', '汕头市', '韶关市', '佛山市', '江门市', '湛江市', '茂名市', "肇庆市", '惠州市', "梅州市", "汕尾市", "河源市", "阳江市", "清远市", "东莞市", "中山市", "潮州市", "揭阳市", "云浮市"],
                ['杭州市', '宁波市', '温州市', '嘉兴市', '湖州市', '绍兴市', '金华市', '衢州市', '舟山市', '台州市', '丽水市'],
                ['昆明市', '曲靖市', '玉溪市', '保山市', '昭通市', '丽江市', '思茅市', '临沧市', '景洪市', '楚雄市', '大理市', '潞西市'],
                ["石家庄市", "唐山市", "秦皇岛市", "邯郸市", "邢台市", "保定市", "张家口市", "承德市", "沧州市", "廊坊市", "衡水市"],
                ['太原市', '大同市', '阳泉市', '长治市', '晋城市', '朔州市', '晋中市', '运城市', '忻州市', '临汾市', '吕梁市'],
                ['沈阳市', '大连市', '鞍山市', '抚顺市', '本溪市', '丹东市', '锦州市', '营口市', '阜新市', '辽阳市', '盘锦市', '铁岭市', '葫芦岛市', '朝阳市'],
                ['长春市', '吉林市', '四平市', '辽源市', '通化市', '白山市', '松原市', '白城市'],
                ['哈尔滨市', '齐齐哈尔市', '鸡西市', '鹤岗市', '双鸭山市', '大庆市', '伊春市', '佳木斯市', '七台河市', '牡丹江市', '黑河市', '绥化市'],
                ['南京市', '无锡市', '徐州市', '常州市', '苏州市', '南通市', '连云港市', '淮安市', '盐城市', '扬州市', '镇江市', '泰州市', '宿迁市'],
                ['合肥市', '芜湖市', '蚌埠市', '淮南市', '马鞍山市', '淮北市', '铜陵市', '安庆市', '黄山市', '滁州市', '阜阳市', '宿州市', '六安市', '亳州市', '池州市', '宣城市'],
                ['福州市', '厦门市', '莆田市', '三明市', '泉州市', '漳州市', '南平市', '龙岩市', '宁德市'],
                ['南昌市', '景德镇市', '萍乡市', '九江市', '新余市', '鹰潭市', '赣州市', '吉安市', '宜春市', '抚州市', '上饶市'],
                ['济南市', '青岛市', '淄博市', '枣庄市', '东营市', '烟台市', '潍坊市', '济宁市', '泰安市', '威海市', '日照市', '临沂市', '德州市', '聊城市', '滨州市', '菏泽市'],
                ['郑州市', '开封市', '洛阳市', '平顶山市', '安阳市', '鹤壁市', '新乡市', '焦作市', '濮阳市', '许昌市', '漯河市', '三门峡市', '南阳市', '商丘市', '信阳市', '周口市', '驻马店市'],
                ['武汉市', '黄石市', '十堰市', '宜昌市', '襄阳市', '鄂州市', '荆门市', '孝感市', '荆州市', '黄冈市', '咸宁市', '随州市'],
                ['长沙市', '株洲市', '湘潭市', '衡阳市', '邵阳市', '岳阳市', '常德市', '张家界市', '益阳市', '郴州市', '永州市', '怀化市', '娄底市'],
                ['海口市', '三亚市', '三沙市', '儋州市'],
                ['宜宾市', '广安市', '达州市', '雅安市', '巴中市', '资阳市'],
                ['兰州市', '嘉峪关市', '金昌市', '白银市', '天水市', '武威市', '张掖市', '平凉市', '酒泉市', '庆阳市', '定西市', '陇南市'],
                ['西宁市', '海东市', '海北藏族自治州', '海南藏族自治州', '果洛藏族自治州', '玉树藏族自治州', '海西蒙古族藏族自治州'],
                ['台北', '高雄', '基隆', '台中', '台南', '新竹', '嘉义', '新北', '桃园', '宜兰县', '新竹县', '苗栗县', '彰化县', '南投县', '云林县', '嘉义县', '屏东县', '台东县', '花莲县', '澎湖县'],
                ['呼和浩特市', '包头市', '乌海市', '赤峰市', '通辽市', '鄂尔多斯市', '呼伦贝尔市', '巴彦淖尔市', '乌兰察布市', '兴安盟', '锡林郭勒盟', '阿拉善盟'],
                ['拉萨市', '日喀则市', '昌都市', '林芝市', '山南市', '那曲市', '阿里地区'],
                ['银川市', '石嘴山市', '吴忠市', '固原市', '中卫市'],
                ['乌鲁木齐市', '克拉玛依市', '吐鲁番市', '哈密市', '昌吉回族自治州', '博尔塔拉蒙古自治州', '阿克苏地区', '喀什地区', '和田地区', '塔城地区', '阿勒泰地区'],
                ['东城区', '西城区', '朝阳区', '丰台区', '石景山区', '海淀区', '门头沟区', '房山区', '通州区', '顺义区', '昌平区', '大兴区'],
                ['和平区', '河东区', '河西区', '南开区', '河北区', '红桥区', '东丽区', '西青区', '津南区', '北辰区', '武清区', '宝坻区', '滨海新区', '宁河区', '静海区', '蓟州区'],
                ['黄浦区', '徐汇区', '长宁区', '静安区', '普陀区', '虹口区', '杨浦区', '闵行区', '宝山区', '嘉定区', '浦东新区', '金山区', '松江区', '青浦区', '奉贤区', '崇明区'],
                ['万州区', '涪陵区', '渝中区', '大渡口区', '江北区', '沙坪坝区', '九龙坡区', '南岸区', '北碚区', '綦江区', '大足区', '渝北区', '巴南区', '黔江区', '长寿区', '江津区', '合川区', '永川区', '南川区', '璧山区', '铜梁区', '潼南区', '荣昌区', '开州区', '梁平区', '武隆区'],
                ['中西区', '湾仔区', '东区', '南区', '油尖旺区', '深水埗区', '九龙城区', '黄大仙区', '观塘区', '荃湾区', '屯门区', '元朗区', '北区', '大埔区', '西贡区', '沙田区', '葵青区', '离岛区'],
                ['花地玛堂区', '圣安多尼区', '大堂区', '望德堂区', '风顺堂区', '嘉模堂区', '圣方济各唐区', '路氹城', '澳门新城区'],
            ];
            var num1 = 0;
            $(function () {
                //循环出省
                for (var i = 0; i < aProvince.length; i++) {
                    $("#selProvince").append(`<option>` + aProvince[i] + "</option>");
                }
                $("#selProvince").change(function () {
                    $("#selCity").children("option").not(":eq(0)").remove();//去掉叠加 清空 但不包括 请选择
                    num1 = parseInt($(this).children("option:selected").index());//获取索引值
                    // console.log(nbum1);
                    if (num1 > 0) {
                        var ac = aCity[num1 - 1];//去掉请选择
                        for (var i = 0; i < ac.length; i++) {
                            $("#selCity").append(`<option>` + ac[i] + "</option>");
                        }
                    }
                });
            });
            const tb = document.querySelector("tbody")
            tb.classList.remove("ssjg")
            tb.classList.add("qb")
            const tbody = document.querySelector(".qb")
            tbody.innerHTML = ``
            for (let i = 0; i < res.data.length; i++) {
                // console.log(res.data[i]);
                const tr = document.createElement("tr")
                tbody.appendChild(tr)
                tr.classList.add("wdsj")
                const wdsj = document.querySelectorAll(".wdsj")
                wdsj[i].innerHTML =
                    `
                <td>${res.data[i].id}</td>
                <td>${res.data[i].area}</td>
                <td>${res.data[i].city}</td>
                <td>${res.data[i].spot}</td>
            `
            }
            // 分页
            const slp = new SimplePagination(Math.ceil(res.count / 9));
            slp.init({
                container: '.box',
                maxShowBtnCount: 3,// 显示中间按钮按钮的个数
                onPageChange: state => {
                    $.ajax({
                        url: `http://127.0.0.1:7001/api/network?page=${state.pageNumber}`,
                        method: 'get',
                        success: function (res) {

                            // console.log(res);
                            const tb = document.querySelector("tbody")
                            tb.classList.remove("ssjg")
                            tb.classList.add("qb")
                            const tbody = document.querySelector(".qb")
                            tbody.innerHTML = ``
                            for (let i = 0; i < res.data.length; i++) {
                                // console.log(res.data[i]);
                                const tr = document.createElement("tr")
                                tbody.appendChild(tr)
                                tr.classList.add("wdsj")
                                const wdsj = document.querySelectorAll(".wdsj")
                                wdsj[i].innerHTML =
                                    `
                                    <td>${res.data[i].id}</td>
                                    <td>${res.data[i].area}</td>
                                    <td>${res.data[i].city}</td>
                                    <td>${res.data[i].spot}</td>
                                `
                            }
                        }
                    })
                    // console.log('pagination change:', state.pageNumber);
                }
            })
            // 监听 go 按钮
            // document.getElementById('page-go').addEventListener('submit', e => {
            //     e.preventDefault()
            //     slp.gotoPage(+document.getElementById('page-num').value)
            // })
        }
    })
}

// 点击搜索
ss.onclick = function () {
    // 开始搜索
    // console.log(sf.value);
    // sessionStorage.clear();
    if (sf.value === "0" && cs.value === "0") {
        alert("请选择相关省份、城市！")
    }
    else if (cs.value === "0") {
        // 存省份的值
        getSf(sf.value)
    }
    else {
        getCs(cs.value)

    }
}

// 搜索省份函数
function getSf(fs = "", page = 1) {
    $.ajax({
        url: `http://127.0.0.1:7001/api/network/new?keyname=${fs}&page=${page}`,
        method: 'get',
        success: function (res) {

            const tbody = document.querySelector("tbody")
            // console.log(tbody);
            tbody.classList.remove("qb")
            tbody.classList.add("ssjg")
            tbody.innerHTML = ''
            for (let i = 0; i < res.data.length; i++) {
                // console.log(res.data[i]);
                const ssjg = document.querySelector(".ssjg")
                const tr = document.createElement("tr")
                ssjg.appendChild(tr)
                tr.classList.add("wdsj")
                const wdsj = document.querySelectorAll(".wdsj")
                wdsj[i].innerHTML =
                    `
                    <td>${res.data[i].id}</td>
                    <td>${res.data[i].area}</td>
                    <td>${res.data[i].city}</td>
                    <td>${res.data[i].spot}</td>
                    `
            }
            if (res.data.length === 0) {
                alert("抱歉！该地点暂未设置网点！")
                $("#selProvince").children("option").not(":eq(0)").remove();//把请选择留着 其余的移除掉
                getwangdian()
            } else {
                const slp = new SimplePagination(Math.ceil(res.count / 9));
                slp.init({
                    container: '.box',
                    maxShowBtnCount: 3,// 显示中间按钮按钮的个数
                    onPageChange: state => {
                        $.ajax({
                            url: `http://127.0.0.1:7001/api/network/new?keyname=${sf.value}&page=${state.pageNumber}`,
                            method: 'get',
                            success: function (res) {
                                // console.log(res);
                                const tb = document.querySelector("tbody")
                                tb.classList.remove("ssjg")
                                tb.classList.add("qb")
                                const tbody = document.querySelector(".qb")
                                tbody.innerHTML = ``
                                for (let i = 0; i < res.data.length; i++) {
                                    // console.log(res.data[i]);
                                    const tr = document.createElement("tr")
                                    tbody.appendChild(tr)
                                    tr.classList.add("wdsj")
                                    const wdsj = document.querySelectorAll(".wdsj")
                                    wdsj[i].innerHTML =
                                        `
                                    <td>${res.data[i].id}</td>
                                    <td>${res.data[i].area}</td>
                                    <td>${res.data[i].city}</td>
                                    <td>${res.data[i].spot}</td>
                                    `
                                }
                            }
                        })
                        // console.log('pagination change:', state.pageNumber);
                    }
                })
            }
        }
    })
}

// 搜索城市函数
function getCs(cs = "", page = 1) {
    $.ajax({
        url: `http://127.0.0.1:7001/api/network?keyname=${cs}&page=${page}`,
        method: 'get',
        success: function (res) {

            // console.log(res);
            // sessionStorage.setItem('page', Math.ceil(res.count / 9))
            // 下拉框
            const tbody = document.querySelector("tbody")
            // console.log(tbody);
            tbody.classList.remove("qb")
            tbody.classList.add("ssjg")
            tbody.innerHTML = ''
            for (let i = 0; i < res.data.length; i++) {
                // console.log(res.data[i]);
                const ssjg = document.querySelector(".ssjg")
                const tr = document.createElement("tr")
                ssjg.appendChild(tr)
                tr.classList.add("wdsj")
                const wdsj = document.querySelectorAll(".wdsj")
                wdsj[i].innerHTML =
                    `
                    <td>${res.data[i].id}</td>
                    <td>${res.data[i].area}</td>
                    <td>${res.data[i].city}</td>
                    <td>${res.data[i].spot}</td>
                    `
            }

            if (res.data.length === 0) {
                alert("抱歉！该地点暂未设置网点！")
                $("#selCity").children("option").not(":eq(0)").remove();//把请选择留着 其余的移除掉
                $("#selProvince").children("option").not(":eq(0)").remove();//把请选择留着 其余的移除掉
                getwangdian()
            } else {
                const slp = new SimplePagination(Math.ceil(res.count / 9));
                slp.init({
                    container: '.box',
                    maxShowBtnCount: 3,// 显示中间按钮按钮的个数
                    onPageChange: state => {
                        // console.log(cs);
                        $.ajax({
                            url: `http://127.0.0.1:7001/api/network?keyname=${cs}&page=${state.pageNumber}`,
                            method: 'get',
                            success: function (res) {
                                // console.log(res);
                                const tb = document.querySelector("tbody")
                                tb.classList.remove("ssjg")
                                tb.classList.add("qb")
                                const tbody = document.querySelector(".qb")
                                tbody.innerHTML = ``
                                for (let i = 0; i < res.data.length; i++) {
                                    // console.log(res.data[i]);
                                    const tr = document.createElement("tr")
                                    tbody.appendChild(tr)
                                    tr.classList.add("wdsj")
                                    const wdsj = document.querySelectorAll(".wdsj")
                                    wdsj[i].innerHTML =
                                        `
                                    <td>${res.data[i].id}</td>
                                    <td>${res.data[i].area}</td>
                                    <td>${res.data[i].city}</td>
                                    <td>${res.data[i].spot}</td>
                                `
                                }
                            }
                        })
                        // console.log('pagination change:', state.pageNumber);
                    }
                })
            }

        }
    })
}




